<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../favicon.ico" rel="shortcut icon" />
<link href="../../base.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../jquery/jquery.js" type="text/javascript"></script>
<script src="../../ux/jquery.ux.js" type="text/javascript"></script>
<script src="../../align/jquery.align.js" type="text/javascript"></script>
<script src="../../ux.popdown/jquery.ux.popdown.js" type="text/javascript"></script>
<link href="../../ux.button/jquery.ux.button.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../ux.button/jquery.ux.button.js" type="text/javascript"></script>
<title>jquery.ux.button</title>
</head><body>

<a href="./">&laquo; Index</a>

<style type="text/css">
#split-main, 
#split-drop {
	height: 22px;
	float: left;
	}
#split-main .ux-button-content {
	width: 40px;
	text-align: left;
	}
#split-drop .ux-button-content {
	padding: 0 2px;
	}
.ux-popdown-div {
	border: 1px solid #707070;
	margin-top: -1px;
	}
#popdown-menu {
	padding: 0;
	margin: 0;
	border: 1px solid #FFF;
	background: #EEE;
	}
#popdown-menu li {
	list-style: none;
	text-align: left;
	padding: 2px 6px;
	margin: 0;
	font-size: 10px;
	cursor: pointer;
	width: 100px;
	}
.popdown-menu-hover {
	background: #FFC;
	}
.popdown-menu-selected {
	background: #4D6FD9;
	color: #FFF;
	}
/* collapsing borders */
.right .ux-button-NW,
.right .ux-button-W,
.right .ux-button-SW {
	width: 0;
	}
.left .ux-button-NE,
.left .ux-button-SE {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
	}
.left .ux-button{
	margin-right: 0;
	}
.right .ux-button {
	margin-left: 0;
	}	
</style>

<script type="text/javascript">
jQuery(function($){
	$('#split-main').button();
	$('#split-drop').button().popdown({
		align: "left outside",
		alignTo: '#split-main',
		classes: { open: "ux-button-checked" },
		html: $('#popdown-menu')
		});
	// add menu and events
	$('#popdown-menu')
		.bind("mouseover mouseleave click",{ 
			$selected:$('#popdown-menu .popdown-menu-selected'), 
			$active:$([]) 
			}, 
		function( ev ){
			var $li = $( ev.target ).closest("li");
			if ( $li.length && ev.type == "click" ){
				ev.data.$selected.removeClass("popdown-menu-selected");
				ev.data.$selected = $li.addClass("popdown-menu-selected");
				$('#split-drop').ux("popdown.hide");
				$('#split-main').ux("button.content", $li.html() );
				return;
				}
			ev.data.$active.removeClass("popdown-menu-hover");
			if ( ev.type == "mouseover" )
				ev.data.$active = $li.addClass("popdown-menu-hover");
			});
	});
</script>

<h2>ux.button / split</h2>
<p><div id="split-main" class="left">Copy</div>
	<div id="split-drop" class="right">&#x25BC;</div>	
	</p>
<div style="display:none">
	<ul id="popdown-menu">
		<li>Cut</li>
		<li class="popdown-menu-selected">Copy</li>
		<li>Paste</li>
		<li>Delete</li>
		</ul>
	</div>

</body></html>